<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/wow/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/wow/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/wow/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/wow/images/logo.svg" color="#222">

<link rel="stylesheet" href="/wow/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"single-flower.gitee.io","root":"/wow/","images":"/wow/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"بحث...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta name="description" content="什么是webshell顾名思义，”web” - 显然需要服务器开放web服务,”shell” - 取得对服务器某种程度上操作权限webshell常常被称为匿名用户(入侵者)通过web服务端口对web服务器有某种程度上操作的权限,由于其大多是以网页脚本的形式出现，也有人称之为网站后门工具 浏览器实现xshell的功能，实现黑窗口什么是shell？shell是一个集成了一堆linux命令的控制台界面">
<meta property="og:type" content="article">
<meta property="og:title" content="webshell">
<meta property="og:url" content="https://single-flower.gitee.io/wow/2021/02/11/zy/webshell/index.html">
<meta property="og:site_name" content="朵朵最可爱">
<meta property="og:description" content="什么是webshell顾名思义，”web” - 显然需要服务器开放web服务,”shell” - 取得对服务器某种程度上操作权限webshell常常被称为匿名用户(入侵者)通过web服务端口对web服务器有某种程度上操作的权限,由于其大多是以网页脚本的形式出现，也有人称之为网站后门工具 浏览器实现xshell的功能，实现黑窗口什么是shell？shell是一个集成了一堆linux命令的控制台界面">
<meta property="og:locale">
<meta property="article:published_time" content="2021-02-11T06:22:11.243Z">
<meta property="article:modified_time" content="2021-04-13T07:05:50.649Z">
<meta property="article:author" content="X y">
<meta property="article:tag" content="-GIT">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://single-flower.gitee.io/wow/2021/02/11/zy/webshell/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-hans'
  };
</script>
<title>webshell | 朵朵最可爱</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="تشغيل شريط التصفح" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/wow/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">朵朵最可爱</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/wow/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-about"><a href="/wow/about/" rel="section"><i class="fa fa-user fa-fw"></i>معلومات</a></li>
        <li class="menu-item menu-item-tags"><a href="/wow/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>الوسوم</a></li>
        <li class="menu-item menu-item-categories"><a href="/wow/categories/" rel="section"><i class="fa fa-th fa-fw"></i>التصنيفات</a></li>
        <li class="menu-item menu-item-archives"><a href="/wow/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>الأرشيفات</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          المحتويات
        </li>
        <li class="sidebar-nav-overview">
          عام
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFwebshell"><span class="nav-number">1.</span> <span class="nav-text">什么是webshell</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%9E%E7%8E%B0xshell%E7%9A%84%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%AE%9E%E7%8E%B0%E9%BB%91%E7%AA%97%E5%8F%A3"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器实现xshell的功能，实现黑窗口</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFshell%EF%BC%9F"><span class="nav-number">1.2.</span> <span class="nav-text">什么是shell？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#shell%E5%8F%AA%E6%9C%89%E8%BF%99%E4%B8%80%E7%A7%8D%E5%90%97%EF%BC%9F"><span class="nav-number">1.3.</span> <span class="nav-text">shell只有这一种吗？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webshell%E7%9A%84%E4%BC%98%E7%82%B9"><span class="nav-number">2.</span> <span class="nav-text">webshell的优点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webshell%E7%9A%84%E5%88%86%E7%B1%BB"><span class="nav-number">3.</span> <span class="nav-text">webshell的分类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%B9%E6%8D%AE%E6%96%87%E4%BB%B6%E5%A4%A7%E5%B0%8F%E5%88%86%E7%B1%BB"><span class="nav-number">3.1.</span> <span class="nav-text">根据文件大小分类</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%B9%E6%8D%AE%E8%84%9A%E6%9C%AC%E5%90%8D%E7%A7%B0%E5%88%86%E7%B1%BB"><span class="nav-number">3.2.</span> <span class="nav-text">根据脚本名称分类</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webshell%E7%9A%84%E5%8A%9F%E8%83%BD"><span class="nav-number">4.</span> <span class="nav-text">webshell的功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AB%99%E9%95%BF%E5%B7%A5%E5%85%B7"><span class="nav-number">4.1.</span> <span class="nav-text">站长工具</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8C%81%E7%BB%AD%E8%BF%9C%E7%A8%8B%E8%AE%BF%E9%97%AE"><span class="nav-number">4.2.</span> <span class="nav-text">持续远程访问</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9D%83%E9%99%90%E6%8F%90%E5%8D%87"><span class="nav-number">4.3.</span> <span class="nav-text">权限提升</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%81%E5%BC%BA%E7%9A%84%E9%9A%90%E8%94%BD%E6%80%A7"><span class="nav-number">4.4.</span> <span class="nav-text">极强的隐蔽性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E7%AB%AF"><span class="nav-number">5.</span> <span class="nav-text">Vue端</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85xterm"><span class="nav-number">5.1.</span> <span class="nav-text">安装xterm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%BC%E5%85%A5css%E6%A0%B7%E5%BC%8F%EF%BC%8Cmain-js"><span class="nav-number">5.2.</span> <span class="nav-text">导入css样式，main.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9C%A8%E9%A1%B5%E9%9D%A2%E9%87%8C%E6%94%BE%E5%85%A5%E4%B8%80%E4%B8%AAid%E5%AF%B9%E7%9A%84%E4%B8%8A%E7%9A%84div"><span class="nav-number">5.3.</span> <span class="nav-text">在页面里放入一个id对的上的div</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6"><span class="nav-number">5.4.</span> <span class="nav-text">添加插件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mounted%E5%88%9D%E5%A7%8B%E5%8C%96div%E6%A0%87%E7%AD%BEid%E4%B8%BAterminal%E5%AF%B9%E8%B1%A1%EF%BC%8C%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AA%E7%9C%9F%E6%AD%A3%E7%9A%84%E9%BB%91%E7%AA%97%E5%8F%A3"><span class="nav-number">5.5.</span> <span class="nav-text">mounted初始化div标签id为terminal对象，成为一个真正的黑窗口</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Django%E7%AB%AF"><span class="nav-number">6.</span> <span class="nav-text">Django端</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%89%E8%A3%85"><span class="nav-number">6.1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#paramiko%E8%BF%9E%E6%8E%A5linux"><span class="nav-number">6.2.</span> <span class="nav-text">paramiko连接linux</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BA%BF%E7%A8%8B-%E6%8E%A5%E6%94%B6%E8%BF%9C%E7%A8%8B%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="nav-number">6.3.</span> <span class="nav-text">创建子线程 接收远程服务器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E8%A7%86%E5%9B%BE%E5%87%BD%E6%95%B0%E8%BF%9B%E8%A1%8C%E8%BF%9E%E6%8E%A5"><span class="nav-number">6.4.</span> <span class="nav-text">创建视图函数进行连接</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">X y</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/wow/archives/">
        
          <span class="site-state-item-count">23</span>
          <span class="site-state-item-name">المقالات</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">التصنيفات</span>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">الوسوم</span>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-hans">
    <link itemprop="mainEntityOfPage" href="https://single-flower.gitee.io/wow/2021/02/11/zy/webshell/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/wow/images/avatar.gif">
      <meta itemprop="name" content="X y">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="朵朵最可爱">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          webshell
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">نُشر في</span>

      <time title="أُنشأ: 2021-02-11 14:22:11" itemprop="dateCreated datePublished" datetime="2021-02-11T14:22:11+08:00">2021-02-11</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">عُدل في</span>
        <time title="عُدل: 2021-04-13 15:05:50" itemprop="dateModified" datetime="2021-04-13T15:05:50+08:00">2021-04-13</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">في</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/wow/categories/GIT/" itemprop="url" rel="index"><span itemprop="name">-GIT</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="什么是webshell"><a href="#什么是webshell" class="headerlink" title="什么是webshell"></a>什么是webshell</h2><p>顾名思义，”web” - 显然需要服务器开放web服务,”shell” - 取得对服务器某种程度上操作权限<br>webshell常常被称为匿名用户(入侵者)通过web服务端口对web服务器有某种程度上操作的权限,由于其大多是以网页脚本的形式出现，也有人称之为网站后门工具</p>
<h3 id="浏览器实现xshell的功能，实现黑窗口"><a href="#浏览器实现xshell的功能，实现黑窗口" class="headerlink" title="浏览器实现xshell的功能，实现黑窗口"></a>浏览器实现xshell的功能，实现黑窗口</h3><h3 id="什么是shell？"><a href="#什么是shell？" class="headerlink" title="什么是shell？"></a>什么是shell？</h3><p>shell是一个集成了一堆linux命令的控制台界面</p>
<h3 id="shell只有这一种吗？"><a href="#shell只有这一种吗？" class="headerlink" title="shell只有这一种吗？"></a>shell只有这一种吗？</h3><p>SH：编程方面相当优秀，输入命令优秀<br>BASH：Linux系统中一个默认的Shell，命令特别多</p>
<h2 id="webshell的优点"><a href="#webshell的优点" class="headerlink" title="webshell的优点"></a>webshell的优点</h2><p>webshell 最大的优点就是可以穿越防火墙，由于与被控制的服务器或远程主机交换的数据都是通过80端口传递的，因此不会被防火墙拦截。并且使用webshell一般不会在系统日志中留下记录，只会在网站的web日志中留下一些数据提交记录，没有经验的管理员是很难看出入侵痕迹的</p>
<h2 id="webshell的分类"><a href="#webshell的分类" class="headerlink" title="webshell的分类"></a>webshell的分类</h2><h3 id="根据文件大小分类"><a href="#根据文件大小分类" class="headerlink" title="根据文件大小分类"></a>根据文件大小分类</h3><p>大马<br>体积大，包含很多功能<br>通常会调用系统的关键函数<br>通常以代码加密隐藏<br>小马<br>一句话木马也称为小马，即整个shell代码量只有一行，一般时系统执行函数</p>
<h3 id="根据脚本名称分类"><a href="#根据脚本名称分类" class="headerlink" title="根据脚本名称分类"></a>根据脚本名称分类</h3><p>jsp、asp、aspx、php</p>
<h2 id="webshell的功能"><a href="#webshell的功能" class="headerlink" title="webshell的功能"></a>webshell的功能</h2><h3 id="站长工具"><a href="#站长工具" class="headerlink" title="站长工具"></a>站长工具</h3><p>Webshell被站长常常用于网站管理、服务器管理等，根据FSO权限的不同，作用有在线编辑网页脚本、上传下载文件、查看数据库、执行任意程序命令等</p>
<h3 id="持续远程访问"><a href="#持续远程访问" class="headerlink" title="持续远程访问"></a>持续远程访问</h3><p>入侵者可以利用从而达到长期控制网站服务器的目的，若攻击者自行修复了漏洞，以确保没有其他人会利用该漏洞，攻击者可以低调的随时控制服务器。一些流行的webshell使用密码验证和其他技术来确保只有上传webshell的攻击者才能访问它</p>
<h3 id="权限提升"><a href="#权限提升" class="headerlink" title="权限提升"></a>权限提升</h3><p>在服务器没有配置错误的情况下，webshell将在web服务器的用户权限下运行，该用户权限是有限的。通过使用webshell，攻击者可以尝试通过利用系统上的本地漏洞来执行权限提升</p>
<h3 id="极强的隐蔽性"><a href="#极强的隐蔽性" class="headerlink" title="极强的隐蔽性"></a>极强的隐蔽性</h3><p>有些恶意网页脚本可以嵌套在正常网页中运行，且不容易被查杀。webshell还可以穿越服务器防火墙，由于与被控制的服务器或远程主机交互的数据都是通过80端口传递，因此不会被防火墙拦截，在没有记录流量的情况下，webshell使用post包发送，也不会被记录在系统日志中，只会在web日志中记录一些数据提交的记录</p>
<h2 id="Vue端"><a href="#Vue端" class="headerlink" title="Vue端"></a>Vue端</h2><h3 id="安装xterm"><a href="#安装xterm" class="headerlink" title="安装xterm"></a>安装xterm</h3><p>cnpm install <a href="mailto:&#x78;&#x74;&#101;&#x72;&#x6d;&#64;&#51;&#x2e;&#49;&#x2e;&#48;">&#x78;&#x74;&#101;&#x72;&#x6d;&#64;&#51;&#x2e;&#49;&#x2e;&#48;</a> –save</p>
<h3 id="导入css样式，main-js"><a href="#导入css样式，main-js" class="headerlink" title="导入css样式，main.js"></a>导入css样式，main.js</h3><p>import ‘xterm/dist/xterm.css’ // 看这里，添加xterm css文件样式</p>
<h3 id="在页面里放入一个id对的上的div"><a href="#在页面里放入一个id对的上的div" class="headerlink" title="在页面里放入一个id对的上的div"></a>在页面里放入一个id对的上的div</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;terminal&quot;</span>&gt;</span><br><span class="line">&lt;!--            黑窗口--&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Terminal &#125; <span class="keyword">from</span> <span class="string">&#x27;xterm&#x27;</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> attach <span class="keyword">from</span> <span class="string">&#x27;xterm/lib/addons/attach/attach&#x27;</span> <span class="comment">// 安装插件适，可以使用attach去添加</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> fit <span class="keyword">from</span> <span class="string">&#x27;xterm/lib/addons/fit/fit&#x27;</span> <span class="comment">// fit进行自适应大小的</span></span><br><span class="line"></span><br><span class="line">Terminal.applyAddon(attach) <span class="comment">// 添加插件</span></span><br><span class="line">Terminal.applyAddon(fit) <span class="comment">// 添加插件</span></span><br></pre></td></tr></table></figure>
<h3 id="mounted初始化div标签id为terminal对象，成为一个真正的黑窗口"><a href="#mounted初始化div标签id为terminal对象，成为一个真正的黑窗口" class="headerlink" title="mounted初始化div标签id为terminal对象，成为一个真正的黑窗口"></a>mounted初始化div标签id为terminal对象，成为一个真正的黑窗口</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="comment">// 获取到了div标签</span></span><br><span class="line">        <span class="keyword">let</span> terminalContainer = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;terminal&#x27;</span>)</span><br><span class="line">        <span class="comment">// 初始化黑窗口对象</span></span><br><span class="line">        <span class="built_in">this</span>.term = <span class="keyword">new</span> Terminal(<span class="built_in">this</span>.terminal)</span><br><span class="line">        <span class="comment">// 打开这个对象</span></span><br><span class="line">        <span class="built_in">this</span>.term.open(terminalContainer)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">new</span> WebSocket(<span class="string">&#x27;ws://127.0.0.1:8000/webssh/&#x27;</span>)</span><br><span class="line">        <span class="built_in">this</span>.terminalSocket = <span class="keyword">new</span> WebSocket(<span class="string">&#x27;ws://127.0.0.1:8000/webssh/&#x27;</span>)</span><br><span class="line">        <span class="built_in">this</span>.terminalSocket.onopen = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 连接成功触发该方法</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;websocket is Connected...&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">this</span>.terminalSocket.onclose = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 连接关闭适触发的方法</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;websocket is Closed...&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">this</span>.terminalSocket.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 连接出错触发的方法</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;damn Websocket is broken!&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">this</span>.term.attach(<span class="built_in">this</span>.terminalSocket)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<h2 id="Django端"><a href="#Django端" class="headerlink" title="Django端"></a>Django端</h2><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>pip install dwebsocket 让django支持ws连接<br>pip install paramiko 连接远程服务器</p>
<h3 id="paramiko连接linux"><a href="#paramiko连接linux" class="headerlink" title="paramiko连接linux"></a>paramiko连接linux</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> dwebsocket <span class="keyword">import</span> accept_websocket</span><br><span class="line"><span class="keyword">import</span> paramiko</span><br><span class="line">def make_ssh(host, username, password, port=<span class="number">22</span>):</span><br><span class="line">    <span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">    :host 主机地址</span></span><br><span class="line"><span class="string">    :username 用户名，一般是root</span></span><br><span class="line"><span class="string">    :password 密码</span></span><br><span class="line"><span class="string">    :port ssh协议的端口,22</span></span><br><span class="line"><span class="string">    &quot;</span><span class="string">&quot;&quot;</span></span><br><span class="line">    # 初始化一个ssh对象</span><br><span class="line">    sh = paramiko.SSHClient()</span><br><span class="line">    # 设置对象连接密钥规则</span><br><span class="line">    sh.set_missing_host_key_policy(paramiko.AutoAddPolicy())</span><br><span class="line">    # 连接</span><br><span class="line">    sh.connect(host, username=username, password=password)</span><br><span class="line">    # 生成shell对象，把命令执行结果，模拟成一个终端的返回，带上花里胡哨的颜色</span><br><span class="line">    channle = sh.invoke_shell(term=<span class="string">&#x27;xterm&#x27;</span>)</span><br><span class="line">    <span class="keyword">return</span> channle</span><br></pre></td></tr></table></figure>
<h3 id="创建子线程-接收远程服务器"><a href="#创建子线程-接收远程服务器" class="headerlink" title="创建子线程 接收远程服务器"></a>创建子线程 接收远程服务器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">def recv_ssh_msg(channle, ws):</span><br><span class="line">    <span class="string">&#x27;&#x27;</span><span class="string">&#x27;</span></span><br><span class="line"><span class="string">        channle: 建立好的SSH连接通道</span></span><br><span class="line"><span class="string">        这个函数会不停的接收ssh通道返回的命令</span></span><br><span class="line"><span class="string">        返回到前端的ws套接字里</span></span><br><span class="line"><span class="string">    &#x27;</span><span class="string">&#x27;&#x27;</span></span><br><span class="line">    # 判断shell连接对象是否没有退出</span><br><span class="line">    <span class="keyword">while</span> not channle.exit_status_ready():</span><br><span class="line">      	# 接收过程可能会因为没有任何返回而报错</span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            buf = channle.recv(1024) # 接收命令的执行结果</span><br><span class="line">            ws.send(buf) # 向Websocket通道返回</span><br><span class="line">        # 接收不到会报错，但是报错没关系，继续重新尝试接受</span><br><span class="line">        except:</span><br><span class="line">            <span class="keyword">break</span></span><br></pre></td></tr></table></figure>
<h3 id="创建视图函数进行连接"><a href="#创建视图函数进行连接" class="headerlink" title="创建视图函数进行连接"></a>创建视图函数进行连接</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> threading <span class="keyword">import</span> Thread</span><br><span class="line">@accept_websocket</span><br><span class="line">def webssh(request):</span><br><span class="line">    <span class="keyword">if</span> request.is_websocket:</span><br><span class="line">        # 1. 获取到连接对象</span><br><span class="line">        ws = request.websocket</span><br><span class="line">        # 2. 初始化linux连接</span><br><span class="line">        channel = make_ssh()</span><br><span class="line">        # 3. 初始化linux数据接收线程，并开启</span><br><span class="line">        recv_thread = Thread(target=recv_ssh_msg, args=(channel, ws))</span><br><span class="line">        recv_thread.start()</span><br><span class="line">        while 1:  # 主线程: 只管发送</span><br><span class="line">            # 2. 阻塞ws接收发来的数据</span><br><span class="line">            cmd = ws.wait()</span><br><span class="line">            # cmd = ws.recv()</span><br><span class="line">            <span class="keyword">if</span> cmd:</span><br><span class="line">                channel.send(cmd)  # 发送到linux 去执行</span><br><span class="line">            else:  # 如果连接断开，那么cmd将会发一个空包</span><br><span class="line">                <span class="keyword">break</span></span><br><span class="line">        recv_thread.join()  # 回收子线程</span><br><span class="line">        ws.close()  # 关闭ws连接</span><br></pre></td></tr></table></figure>
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/wow/tags/GIT/" rel="tag"># -GIT</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/wow/2021/02/10/zy/redis%E5%8F%91%E5%B8%83%E8%80%85%E8%AE%A2%E9%98%85%E8%80%85/" rel="prev" title="redis发布者订阅者">
                  <i class="fa fa-chevron-left"></i> redis发布者订阅者
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/wow/2021/02/18/zy/redis%E9%94%AE%E7%A9%BA%E9%97%B4%E4%BA%8B%E4%BB%B6/" rel="next" title="redis键空间事件">
                  redis键空间事件 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>







<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">X y</span>
</div>
  <div class="powered-by">تطبيق الموقع <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/wow/js/utils.js"></script><script src="/wow/js/motion.js"></script><script src="/wow/js/schemes/muse.js"></script><script src="/wow/js/next-boot.js"></script>

  






  





</body>
</html>
